<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天助手</title>
    <link rel="stylesheet" href="/static/css/llm_chat_css.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body>
    <div class="chat-container">
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2>大象云AI</h2>
            </div>
            <div class="chat-list">
                <div class="chat-item active">
                    <i class="fas fa-comment-alt"></i>
                    <span>新的聊天</span>

                    <!-- <script>
                        function updateTime() {
                            const now = new Date();
                            const formattedTime = now.toLocaleString('zh-CN', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                second: '2-digit',
                                hour12: false
                            });
                            document.getElementById('chat-time').textContent = formattedTime;
                        }
                        updateTime(); // 初始化时更新一次
                        setInterval(updateTime, 1000); // 每秒更新一次时间
                    </script> -->
                </div>
                <!-- 可以添加更多聊天项 -->
            </div>
            <div class="sidebar-footer">
                <button id="new-chat-btn"><i class="fas fa-plus"></i></button>
                <button id="settings-btn"><i class="fas fa-cog"></i></button>
            </div>
        </aside>
        <main class="chat-main">
            <header class="chat-header">
                <h2>新的聊天 <span>本地大模型</span></h2>
                <div class="header-actions">
                    <button><i class="fas fa-edit"></i></button>
                    <button><i class="fas fa-share"></i></button>
                    <button><i class="fas fa-expand"></i></button>
                </div>
            </header>
            <div class="chat-messages" id="chat-messages">
                <!-- 消息将在这里动态添加 -->
            </div>
            <footer class="chat-footer">
                <div class="input-container">
                    <textarea id="user-input" placeholder="输入消息..." rows="1"></textarea>
                    <input type="file" id="file-input" style="display: none;" />
                    <button id="upload-btn" onclick="document.getElementById('file-input').click();">
                        <i class="fas fa-upload"></i>
                    </button>
                    <button id="send-btn" title="发送"><i class="fas fa-paper-plane"></i></button>

                </div>
            </footer>
        </main>
    </div>
    <script src="/static/js/llm_chat_js.js"></script>
</body>

</html>